<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!--V view视图模板-->
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{address}}</h1>
      <!--不仅是自己定义的，所有VM中的属性，都可以直接使用-->
      <h1>测试数据一：{{1+1}}</h1>
      <h1>测试数据二：{{$options}}</h1>
      <h1>测试数据三：{{$emit}}</h1>
      <h1>测试数据四：{{_c}}</h1>
    </div>
  </body>

  <script type="text/javascript">
    //VM  Vue实例，中转站
    const vm = new Vue({
      el: "#root",
      data() {
        console.log("函数式内部对象" + this);
        return {
          //M  model数据
          name: "尚硅谷123",
          address:"上海"
        };
      },
    });
  </script>
</html>
